<template>
	<view>
		<view class="album-wrap">
			<scroll-view scroll-y="true" class="group-wrap">
				<view class="item" :class="{ selected: item.album_id == albumId }" v-for="(item, index) in albumList"
					:key="index" @click="changeAlbum(item.album_id)">
					<text :class="{ 'color-base-border': item.album_id == albumId }">{{ item.album_name }}</text>
				</view>
			</scroll-view>
			<view class="pic-wrap">
				<mescroll-uni @getData="getData" ref="mescroll" size="30">
					<block slot="list">
						<view class="list-wrap">
							<view class="item-wrap upload" @click="photograph()">
								<text class="iconfont iconxiangji"></text>
								<text class="txt">拍摄照片</text>
							</view>
							<view class="item-wrap" v-for="(item, index) in picList" :key="index"
								@click="previewImg(item.pic_path)">
								<image :src="$util.img(item.pic_path, { size: 'mid' })" mode="scaleToFill"
									@error="imgError(index)"></image>
								<view @click.stop="checkImg(item.pic_path,index)" class="circle"
									:class="{ 'selected color-base-bg': isSelected(item.pic_path) }">
									{{ getImgIndex(item.pic_path) }}
								</view>
								<view v-show="isSelected(item.pic_path)" class="mask-layer"></view>
							</view>
						</view>
					</block>
				</mescroll-uni>
			</view>
		</view>
		<view class="footer-wrap">
			<button type="primary" :disabled="selectedImg.length == number" @click="save()" size="mini">
				确定{{ selectedImg.length ? '（' + selectedImg.length + '）' : '' }}
			</button>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				albumList: [],
				albumId: 0,
				picList: [],
				mescroll: null,
				number: 9,
				selectedImg: [],
				index: 0
			};
		},
		onLoad(option) {
			this.number = option.number || 9;
			if (!this.$util.checkToken('/pages/goods/album?number=' + this.number)) return;
			var selectedAlbumImgTemp = uni.getStorageSync('selectedAlbumImgTemp') ? JSON.parse(uni.getStorageSync(
				'selectedAlbumImgTemp')) : null;
			if (selectedAlbumImgTemp) {
				if (selectedAlbumImgTemp.list) {
					this.selectedImg = selectedAlbumImgTemp.list.split(',');
				}
				this.index = selectedAlbumImgTemp.index;
			}
		},
		async onShow() {
			await this.getAlbumList();
		},
		methods: {
			async getAlbumList() {
				var res = await this.$api.sendRequest({
					url: '/shopapi/album/lists',
					async: false,
					success: res => {}
				});
				if (res.data) {
					this.albumList = res.data;
					if (this.albumList.length > 0) this.albumId = this.albumList[0].album_id;
					if (this.mescroll) this.mescroll.resetUpScroll();
				}
			},
			getData(mescroll) {
				this.mescroll = mescroll;
				if (this.albumId == 0) return;
				this.$api.sendRequest({
					url: '/shopapi/album/picList',
					data: {
						page_size: mescroll.size,
						page: mescroll.num,
						album_id: this.albumId
					},
					success: res => {
						let newArr = [];
						let msg = res.message;
						if (res.code == 0 && res.data) {
							newArr = res.data.list;
						} else {
							this.$util.showToast({
								title: msg
							});
						}
						mescroll.endSuccess(newArr.length);
						//设置列表数据
						if (mescroll.num == 1) this.picList = []; //如果是第一页需手动制空列表
						this.picList = this.picList.concat(newArr); //追加新数据
						// newArr.forEach(v => {
						// 	v.isExist = false; // 图片是否存在
						// });
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			changeAlbum(album_id) {
				this.albumId = album_id;
				if (this.mescroll) this.mescroll.resetUpScroll();
			},
			// 手机拍照
			photograph() {
				this.$util.upload({
						number: this.number,
						path: 'album',
						sourceType: ['camera'],
						album_id: this.albumId
					},
					res => {
						if (this.mescroll) this.mescroll.resetUpScroll();
					}
				);
			},
			checkImg(pic_path, key) {
				var index = this.selectedImg.indexOf(pic_path);
				// if(this.picList[key].isExist) {
				// 	this.$util.showToast({
				// 		title: '该图片未找到',
				// 	});
				// 	return;
				// }
				if (index == -1) {
					if (this.selectedImg.length + 1 >= this.number) return;
					this.selectedImg.push(pic_path);
				} else {
					this.selectedImg.splice(index, 1);
				}
			},
			isSelected(pic_path) {
				if (this.selectedImg.indexOf(pic_path) > -1) return true;
				else return false;
			},
			getImgIndex(pic_path) {
				var index = this.selectedImg.indexOf(pic_path);
				if (index > -1) return index + 1;
				else return '';
			},
			previewImg(pic_path) {
				var index = this.selectedImg.indexOf(pic_path);
				var paths = [];
				if (index > -1) {
					this.selectedImg.forEach(item => {
						paths.push(this.$util.img(item));
					});
				} else {
					paths = [this.$util.img(pic_path)];
				}
				uni.previewImage({
					current: 0,
					urls: paths
				});
			},
			imgError(index) {
				// this.picList[index].isExist = true;
				// this.picList[index].pic_path = this.$util.getDefaultImage().default_goods_img;
				// this.$forceUpdate();
			},
			save() {
				if (this.selectedImg.length == 0) {
					this.$util.showToast({
						title: '请选择图片'
					});
					return;
				}
				var temp = {
					list: this.selectedImg.toString(),
					index: this.index
				};
				uni.setStorageSync('selectedAlbumImg', JSON.stringify(temp));
				uni.navigateBack({
					delta: 1
				});
			}
		}
	};
</script>

<style lang="scss">
	page {
		overflow: hidden;
	}

	.album-wrap {
		display: flex;

		.group-wrap {
			width: 25%;
			height: 93vh;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);

			.item {
				padding: 20rpx 20rpx 20rpx 0;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;

				text {
					padding: 0 20rpx;
					border-left: 4rpx solid transparent;
				}

				&.selected {
					background-color: #fff;
				}
			}
		}

		.pic-wrap {
			flex: 1;

			.list-wrap {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				align-items: center;
				padding-bottom: constant(safe-area-inset-bottom);
				padding-bottom: env(safe-area-inset-bottom);

				.item-wrap {
					position: relative;
					width: 32.5%;
					height: 170rpx;
					margin-right: 4rpx;
					margin-bottom: 4rpx;
					line-height: initial;
					text-align: center;

					image {
						width: 170rpx;
						height: 170rpx;
					}

					.mask-layer {
						background-color: rgba(0, 0, 0, 0.4);
						position: absolute;
						z-index: 10;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
					}

					.circle {
						border: 2rpx solid #fff;
						position: absolute;
						z-index: 20;
						border-radius: 50%;
						width: 40rpx;
						height: 40rpx;
						background-color: rgba(0, 0, 0, 0.2);
						top: 10rpx;
						right: 10rpx;
						text-align: center;
						line-height: 40rpx;
						color: #fff;

						&.selected {
							border-color: transparent;
						}
					}

					&.upload {
						background-color: #f2f2f2;
						color: $color-tip;
						line-height: inherit;

						.iconfont {
							font-size: 60rpx;
							display: block;
							text-align: center;
						}

						.txt {
							display: block;
							text-align: center;
							font-size: $font-size-tag;
						}
					}
				}
			}
		}
	}

	.footer-wrap {
		position: fixed;
		bottom: 0;
		right: 0;
		padding: 20rpx 30rpx 0;
		z-index: 10;
		background-color: #fff;
		width: 100%;
		text-align: right;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>
<style scoped>
	.pic-wrap>>>.mescroll-uni-fixed {
		top: initial;
		bottom: initial;
		left: initial;
		right: initial;
		bottom: 100rpx;
		/* !important*/
		width: 75%;
	}
</style>